<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册页面</title>

<link rel="stylesheet" href="__PUBLIC__/css/bootstrap.css" />
<script src="__PUBLIC__/js/jquery-1.7.2.min.js" type="text/javascript"></script>

<!-- ========= -->
<style type="text/css">


html{overflow-y:scroll;vertical-align:baseline;}
body{font-family:Microsoft YaHei,Segoe UI,Tahoma,Arial,Verdana,sans-serif;font-size:12px;color:#fff;height:100%;line-height:1;background:#999}
*{margin:0;padding:0}
ul,li{list-style:none}
h1{font-size:30px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.80)}
.screenbg{position:fixed;bottom:0;left:0;z-index:-999;overflow:hidden;width:100%;height:100%;min-height:100%;}
.screenbg ul li{display:block;list-style:none;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:-1000;float:right;}
.screenbg ul a{left:0;top:0;width:100%;height:100%;display:inline-block;margin:0;padding:0;cursor:default;}
.screenbg a img{vertical-align:middle;display:inline;border:none;display:block;list-style:none;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:-1000;float:right;}

.login-box{width:700px;height:400px;margin:120px auto 0 auto;text-align:center;padding:40px;background:rgba(20,100,19,0.5);border-radius:10px;}
#tab_title{
	width: 100%;
	height: 40px;	
	border-bottom: 2px solid #fff;
}
#tab_title li{
	float: left;
	padding: 20px auto;
	width: 300px;
	font-size: 25px;
	
}
#tab_title li:hover{
	cursor: pointer;
}
#tab_content{
	width: 95%;
}
#tab_content li{
	display: none;
}
.li_seted{
	color: #fdc!important;
}
.selected{
	display: block!important;
}
.form{
	padding-top: 30px;
	padding-left:20%;
	
}

</style>



<script type="text/javascript">
$(function(){
	$(".screenbg ul li").each(function(){
		$(this).css("opacity","0");
	});
	$(".screenbg ul li:first").css("opacity","1");
	var index = 0;
	var t;
	var li = $(".screenbg ul li");	
	var number = li.size();
	function change(index){
		li.css("visibility","visible");
		li.eq(index).siblings().animate({opacity:0},3000);
		li.eq(index).animate({opacity:1},3000);
	}
	function show(){
		index = index + 1;
		if(index<=number-1){
			change(index);
		}else{
			index = 0;
			change(index);
		}
	}
	t = setInterval(show,8000);
	//根据窗口宽度生成图片宽度
	var width = $(window).width();
	$(".screenbg ul img").css("width",width+"px");
});
</script>

</head>

<body>

<div class="login-box">
	<ul id="tab_title">
		<li class="li_seted">邮箱注册</li>
		<li>手机注册</li>
	</ul>
	<ul id="tab_content">
		<li class="selected">
				<form class="form form-horizontal" method="post" action="{:U('Base/register')}">
				  <div class="form-group">
				    <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
				    <div class="col-sm-7">
				      <input type="email" class="form-control" id="inputEmail3" name='email' placeholder="请输入邮箱">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputEmail3" class="col-sm-2 control-label">昵称</label>
				    <div class="col-sm-7">
				      <input type="text" class="form-control" name='nickname' id="inputEmail3" placeholder="请输入昵称">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
				    <div class="col-sm-7">
				      <input type="password" class="form-control" name='password' id="inputPassword3" placeholder="请输入密码">
				    </div>
				  </div>

				  <div class="form-group">
				    <label for="inputPassword3" class="col-sm-2 control-label">重复密码</label>
				    <div class="col-sm-7">
				      <input type="password" class="form-control" name='repassword' id="inputPassword3" placeholder="请输入密码">
				    </div>
				  </div>

				  <div class="form-group">
				    <div class="col-sm-offset-2 col-sm-7">
				      <button type="submit" class="btn btn-primary">注册</button>
				    </div>
				  </div>
				</form>
		</li>
		<li>
			<form class="form form-horizontal" method="post" action="{:U('Base/register')}">
				  <div class="form-group">
				    <label for="inputEmail3" class="col-sm-2 control-label">手机</label>
				    <div class="col-sm-7">
				      <input type="text" name='phone' class="form-control" id="inputEmail3" placeholder="请输入手机">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputEmail3" class="col-sm-2 control-label">昵称</label>
				    <div class="col-sm-7">
				      <input type="text" name='nickname' class="form-control" id="inputEmail3" placeholder="请输入昵称">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
				    <div class="col-sm-7">
				      <input type="password" name='password' class="form-control" id="inputPassword3" placeholder="请输入密码">
				    </div>
				  </div>

				  <div class="form-group">
				    <label for="inputPassword3" class="col-sm-2 control-label">重复密码</label>
				    <div class="col-sm-7">
				      <input type="password" name='repassword' class="form-control" id="inputPassword3" placeholder="请输入密码">
				    </div>
				  </div>

				  <div class="form-group">
				    <div class="col-sm-offset-2 col-sm-7">
				      <button type="submit" class="btn btn-primary">注册</button>
				    </div>
				  </div>
				</form>
		</li>
	</ul>
	
</div>



<div class="screenbg">
	<ul>
		<li><a href="javascript:;"><img src="__PUBLIC__/images/banner.jpg"></a></li>

		<li><a href="javascript:;"><img src="__PUBLIC__/images/1.jpg"></a></li>
	</ul>
</div>

<script>
	title_lis = document.getElementById('tab_title').getElementsByTagName('li');
	content_lis = document.getElementById('tab_content').getElementsByTagName('li');

	for (var i = 0; i <title_lis.length; i++){
		(function(i){
			title_lis[i].onclick= function(){
				
				for (var j = 0; j<content_lis.length ; j++) {
					content_lis[j].className ='';
					content_lis[j].removeAttribute ='class';
					title_lis[j].className ='';
					title_lis[j].removeAttribute ='class';
				};
				title_lis[i].className = 'li_seted';
				content_lis[i].className = 'selected';

			}
		})
		(i)
	};

</script>
</body>
</html>
